<script setup lang="ts">
import { ref, onMounted,reactive,watch } from "vue";
import {
  createUploadItem,
  generateFakeUploadItems,
  uploadFile,
  fakeUpload,
} from "./upload";
import { UploadItem, UploadStatus } from "./models";

const upload_list = ref<UploadItem[]>([]);



onMounted(() => {
  upload_list.value = generateFakeUploadItems(5).map(reactive);
});

const deleteItem = (index: number) => {
  let item = upload_list.value[index];
  if (item?.status == UploadStatus.Uploading) {
    alert("File is uploading can not be deleted!");
    return;
  }
  upload_list.value.splice(index, 1);
};
const stop_uploading = () => {
  // console.log('Stop uploading....')
  upload_list.value.forEach(item=>{
    if (item.status!=UploadStatus.Uploading) {
      return
    }
    item.status=UploadStatus.Stop
    item.detail='Stop Manually'
    })
};

function add_upload_item(fileName: string, fileSize: number, file: File) {
  for (const it of upload_list.value) {
    if (it.fileName == fileName && it.fileSize == fileSize) {
      alert("The same file has been added!");
      return;
    }
  }
  const item = createUploadItem(fileName, fileSize, file);
  upload_list.value.push(reactive(item));
  console.dir(item);
}

const remove_all=()=>upload_list.value.length=0

const input = document.createElement("input");
input.type = "file";
input.onchange = () => {
  let file = input.files![0];
  add_upload_item(file.name, file.size, file);
};
let add_file = () => input.click();

const uploading = ref(false);

const upload_items = async () => {
  uploading.value = true;
  const tasks:Promise<void>[]=[]
  for (const item of upload_list.value) {
    // console.log("Uploading:", iterator.fileName);
    if (item.status==UploadStatus.Stop) {
      item.status=UploadStatus.Waiting
      item.detail=''
      }
    let task= uploadFile(item);
    tasks.push(task)
  }
  Promise.all(tasks).then(()=>uploading.value=false)
};
</script>

<template>
  <div class="container">
    <h1 class="container-header reverse text-shadow">
      Uploading
    </h1>
    <div class="container-list">
      <p 
      class="hint reverse" 
      v-if="upload_list.length==0"
      @click="add_file()">Press Add  First</p>
      <div class="upload-item" v-for="(item,index) in upload_list">
        <p class="item-info">
          <span class="item-tag ">
            <span class="item-size reverse">{{item.formattedSize()}}</span>
            <span class="item-name tag-value">{{item.formattedName()}}</span>
          </span>
          <span class="item-operation">
            <button 
            v-if="item.status!=UploadStatus.Uploading" 
            class="btn danger large blank"
            @click="deleteItem(index)">&#x2718;</button>
          </span>
        </p>
        <p class="item-progress">
          <span class="progress-bar" :class="{error:item.status==UploadStatus.Error,uploading:item.status==UploadStatus.Uploading}" :style="{width:item.formattedProgress()}"></span>
          <span v-if="item.status==UploadStatus.Uploading" class="progress-value">{{item.formattedProgress()}}</span>
          <span v-else class="item-message">{{item.detail?item.detail:item.formattedStatus()}}</span>
        </p>
      </div>
      <button 
      class="btn strech danger large" 
      id="remove-all-btn"
      @click="remove_all()"
      v-if="upload_list.length>0">Remove All</button>
    </div>
    <div class="operations uploading" v-if="!uploading">
      <button 
      class="btn large"
      @click="add_file()">Add</button>
      <button 
      class="btn large"
      @click="upload_items()"
      >Upload</button>
    </div>
    <button
      id="stop-btn"
      class="btn large danger strench"
      @click="stop_uploading()"
      v-else>Stop</button>
  </div>
</template>

<style scoped>
.container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 40px 1fr 40px;
}

.container-list{
  overflow-y: auto;
  height: 100%;
  width: 100%;
}
.upload-item{
  display: flex;
  flex-direction: column;
  font-size: 20px;
  margin-top: 20px;
}
.item-info{
  display: grid;
  grid-template-columns: 1fr 40px;
  font-weight: 400;
  width: 100%;
  align-self: start;
  border-bottom: 1px solid;
  /* outline: 1px solid red; */
  line-height: 32px;
}
.item-size{
  width: 70px;
  text-align: right;
  padding-right: 4px;
  height: 100%;
  display: inline-block;
  font-size: 18px;
}
.item-name{
  text-align: left;
  padding-left: 4px;
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
}

.hint{
  text-align: center;
  /* --font-color:cyan; */
}

.item-operation{
  justify-self: center;
  align-self: center;
  display: inline-block;
}
.item-progress{
  font-size: .6rem;
  position: relative;
  /* border-bottom: 1px solid; */
  height: 16px;
}
.progress-bar{
  display: block;
  position: absolute;
  width: 0%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--font-color);
  transition: width .1s;
}
.progress-bar.uploading{
  background-color: var(--success-color);
}
.progress-bar.error{
  background-color: var(--danger-color);
  width: 100% !important;
}
.progress-value,.item-message{
  position: absolute;
  inset: 0 0 0 0;
  mix-blend-mode: difference;
  text-align: center;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
}
#remove-all-btn{
  margin-top: 20px;
}
.operations {
  /* position: absolute;
  bottom: 0;
  left: 0; */
  width: 100%;
  place-self: end;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1px;
}
#stop-btn{
  align-self: end;
}
</style>
<style>

</style>

